<template>
  <v-dialog v-model="dialog" width="auto">
    <template v-slot:activator="{ props: activatorProps }">
      <v-btn prepend-icon="mdi-plus" color="primary" v-bind="activatorProps">
        {{ btnName }}
      </v-btn>
    </template>
    <v-card :width="width" :title="title">
      <template v-slot:text>
        <div
          class="grid gap-6"
          :style="{ gridTemplateColumns: `repeat(${columns}, 1fr)` }"
        >
          <template v-for="el in items" :key="el.label">
            <v-text-field
              @blur="emit('change', params)"
              v-model:model-value="params[el.key].value"
              :label="el.label"
              density="compact"
              variant="outlined"
              clearable
              v-if="el.type == 'input'"
              :error-messages="el.errMsg"
            ></v-text-field>
            <v-switch
              :error-messages="el.errMsg"
              v-model:model-value="params[el.key].value"
              inset
              center-affix
              v-else-if="el.type == 'switch'"
              @change="emit('change', params)"
            >
              <template #prepend>
                <span>{{ el.label }}</span>
              </template>
            </v-switch>

            <!-- TODO:树形选中框有点bug，目前跳过 -->
            <v-select
              v-else-if="el.type == 'select'"
              :items="items"
              label="Select Item"
              item-value="id"
              item-title="title"
              density="compact"
              variant="solo"
              v-model="params[el.key].value"
              :error-messages="el.errMsg"
            >
              <template #selection>
                {{ params[el.key].value }}
              </template>
              <template #item="{ index, props }">
                <v-treeview
                  v-if="index == 0"
                  :items="el.selector"
                  density="compact"
                  item-title="title"
                  item-value="id"
                  activatable
                  open-on-click
                  rounded
                  v-bind="props"
                >
                </v-treeview>
              </template>
            </v-select>

            <div v-if="el.type == 'icon'" class="relative">
              <v-hover
                v-model:model-value="showicon"
                close-delay="300"
                open-delay="200"
              >
                <template #default="{ isHovering, props }">
                  <v-text-field
                    v-model="params[el.key].value"
                    :label="el.label"
                    density="compact"
                    variant="outlined"
                    clearable
                    v-bind:="props"
                    @input="showicon = false"
                    :append-inner-icon="params[el.key].value"
                    :error-messages="el.errMsg"
                  >
                  </v-text-field>

                  <v-card
                    v-show="isHovering"
                    v-bind="props"
                    min-width="300"
                    variant="elevated"
                    class="absolute top-[80%] z-10 w-full left-1/2 transform -translate-x-1/2"
                  >
                    <template #text>
                      <v-text-field
                        density="compact"
                        prepend-inner-icon="mdi-magnify"
                        variant="underlined"
                        placeholder="搜索图标"
                        v-model:model-value="key"
                      ></v-text-field>
                      <div class="flex flex-wrap gap-3">
                        <v-btn
                          @click="selectIcon(el.key, icon)"
                          v-for="icon in curIcons"
                          :key="icon"
                          width="50"
                          height="50"
                        >
                          <v-icon :color="getRandomColor()" size="large">{{
                            icon
                          }}</v-icon>
                        </v-btn>
                      </div>
                      <div class="flex gap-3 justify-center items-center">
                        <div>默认图标{{ icons.length }}条</div>
                        <v-pagination
                          v-model:model-value="iconPage"
                          variant="text"
                          :length="Math.ceil(icons.length / iconLimit)"
                        ></v-pagination>
                      </div>
                    </template>
                  </v-card>
                </template>
              </v-hover>
            </div>
          </template>
        </div>
      </template>
      <template v-slot:actions>
        <v-btn @click="cancelClick ? cancelClick() : (dialog = false)"
          >取消</v-btn
        >
        <v-btn @click="confirm" :color="confirmBtnColor">添加</v-btn>
      </template>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { VTreeview } from 'vuetify/labs/VTreeview';
import { getIconList } from '@/api';
import { ref, computed, reactive, onMounted } from 'vue';
import { getRandomColor } from '@/utils';
import { FormCardItems } from '@/types/util';
const { iconLimit, items, confirmClick } = defineProps({
  width: { type: String, default: () => '400' },
  btnName: { type: String, default: () => '添加' },
  columns: { type: String, default: () => '1' },
  title: { type: String, default: () => '添加' },
  confirmBtnName: { type: String, default: () => '添加' },
  confirmBtnColor: { type: String, default: () => 'primary' },
  cancelBtnName: { type: String, default: () => '取消' },
  confirmClick: { type: Function },
  cancelClick: { type: Function },
  items: {
    type: Array<FormCardItems>,
    default: () => [
      {
        key: '1',
        label: '输入框',
        type: 'input',
        value: '123',
        errMsg: 'error',
      },
      {
        key: '2',
        label: '开关',
        type: 'switch',
        value: false,
        errMsg: 'error',
      },
      { key: '3', label: '图标', type: 'icon', value: '', errMsg: 'error' },
      {
        key: '4',
        label: '选择框',
        type: 'select',
        value: '123',
        selector: [
          {
            id: 1,
            title: 'Node 1',
            children: [
              { id: 2, title: 'Child 1' },
              { id: 3, title: 'Child 2' },
            ],
          },
          {
            id: 4,
            title: 'Node 2',
            children: [
              { id: 5, title: 'Child 3' },
              { id: 6, title: 'Child 4' },
            ],
          },
        ],
      },
    ],
  },
  iconLimit: { type: Number, default: () => 20 },
});
const emit = defineEmits(['change']);
const icons = ref([]);
const dialog = ref(false);
const showicon = ref(false);
const iconPage = ref(1);
const key = ref('');
const params = reactive<any>({});

function selectIcon(key: string, icon: string) {
  params[key].value = icon;
  showicon.value = false;
  emit('change', params);
}

function confirm() {
  confirmClick &&
    confirmClick().then((ok: boolean) => {
      console.log('confirm');
      ok && (dialog.value = false);
    });
}

const curIcons = computed(() => {
  let filteredIcons = icons.value;
  if (key.value) {
    filteredIcons = icons.value.filter((icon: string) =>
      icon.includes(key.value),
    );
  }
  return filteredIcons.slice(
    (iconPage.value - 1) * iconLimit,
    iconPage.value * iconLimit,
  );
});

onMounted(() => {
  getIconList().then((res: any) => (icons.value = res));
  if (items) {
    items.forEach((item: FormCardItems) => {
      params[item.key] = {
        key: item.key,
        value: item.value,
      };
    });
  }
});
</script>

<style scoped></style>
